<h2>图片上传预览</h2>
<div style="width:	800px">
	<form id="formFileUpload" method="post" enctype="multipart/form-data">
		<table  style="width:98%;border-collapse:separate;border-spacing:10px;">
			<tr>
				<td>
					<input id="upload" name="file" class="easyui-filebox" 
						style="width: 400px" data-options="
						buttonText:'选择文件', 
						accept:'image/jpeg' 
						"/>
				</td>
			</tr>
			<tr>
				<td>
					<div style="width:600px;height:480px;text-align:center;">
						<img id="viewImg" src="img/noImg.jpg" style="max-height: 100%" />
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<a href="#" id="hl_img" class="easyui-linkbutton" plain="true" data-options="iconCls:'icon-search'">浏览图片</a>
				</td>
			</tr>	
		</table>
	</form>
	<div style="text-align:center;clear:both;margin:5px;">  
        <a href="#" id="upload_button" class="easyui-linkbutton" plain="true" onclick="javascript:fileUpload();"
         style="width: 80px">上传</a> 
    </div>
</div>

<script lang="text/javascript">

$(function() { 
    $(document).ready(function() { 
    	//$("#hl_img").linkbutton("disable");
    });
});

function fileUpload(){
	if ($("#upload").filebox('getText').length == 0){
		$.messager.alert("提示","上传的是空文件！");
		return;
	}
	if (checkImgFile()){
		$("#formFileUpload").ajaxSubmit({
	        type: "POST",
	        url:"api/fileController/upload",
	        dataType: "text",
	        success: function(data){
	        	//var data = JSON.parse(data);
	            var strImgUrl = data.toString();
	            console.log(strImgUrl);
	            
	            var newImg = new Image();
	            newImg.src = strImgUrl;
	            
	            document.getElementById("viewImg").src=newImg.src;
	            
	            //$("#viewImg").attr("src", strImgUrl); 
	            
	            $('#hl_img').bind('click', function(){    
	            	var openNewLink = window.open(strImgUrl, '浏览图片', 'height=300, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=false, location=no, status=no'); //参数： url, 名称, 窗体样式
	                if(window.focus) {
	                  openNewLink.focus();
	                }
	                return false;    
	            });
	            
	            //$('#hl_img').linkbutton('enable');
	        }
	    });
	}
}

function isImg(target, array){
	for (var suffix in array){
		if (array[suffix] == target){
			return true;
		}
	}
	return false;
}

function checkImgFile(){
	var filepath = $("input[name='file']").val();
    
    var uploadFileSuffix=$("#upload").filebox('getText').substr($("#upload").filebox('getText').lastIndexOf(".") + 1).toLowerCase();//获得文件后缀名
    var fileSuffixRange = Array("jpg","jpeg","gif","png","bmp");
    if (!isImg(uploadFileSuffix,fileSuffixRange)){
  	  $.messager.alert("提示","上传的不是图片！");
  	  return false;
    }
    
    var file_size = 0;
    var size = 0;
    var browserName = "";
    
    var isIE = /msie/.test(navigator.userAgent.toLowerCase());//判断是否为IE操作系统，jQuery
    if (isIE) {
    	browserName = "IE";
    	var fileobject = new ActiveXObject ("Scripting.FileSystemObject");//获取上传文件的对象
    	var file = fileobject.GetFile(filepath);//获取上传的文件
    	file_size = file.Size;//检测 上传文件大小
    }else{
    	browserName = "非IE";
    	var file = $("input[name='file']")[0].files[0];
  	  	file_size = file.size;
    }
    
    if (file_size > 0){
    	size = file_size / 1024 / 1024;
    	console.log("图片大小（MB）：");
    	console.log(size.toFixed(2));
    	if (file_size > 10 * 1024 * 1024){
    		$.messager.alert(browserName + "浏览器提示","当前图片大小：" + size.toFixed(2) + "MB，上传图片不得大于10M！请重新选择图片！");
    		return false;
    	}
    }
    
    return true;
}


 
</script>